<template>
  <div class="new-add-service-item">
    <!-- 顶部标题 -->
    <div class="top">
      <div></div>
      <span>服务包管理</span>
    </div>

    <!-- 服务项目信息 -->
    <div class="middle">
      <div class="title">服务项目信息</div>
      <div class="my_container">
        <!-- 表单 -->
        <el-form
          :inline="true"
          :model="servicePackageNews"
          class="demo-form-inline"
          :rules="rules"
        >
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="servicePackageNews.projectName"
              placeholder="请输入"
              style="height:40px;width:400px"
            />
          </el-form-item>
          <el-form-item label="服务次数" prop="num">
            <el-input
              v-model="servicePackageNews.timeNum"
              style="height:40px;width:400px"
              placeholder="请输入"
            />
          </el-form-item>
          <br />
          <el-form-item label="项目类型" >
            <el-select
              v-model="servicePackageNews.projectType"
              style="height:40px;width:400px"
              placeholder="请选择"
            >
              <el-option label="全部" value="all" />
              <el-option label="付费项目" value="pay" />
              <el-option label="免费项目" value="free" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目原价" prop="price1">
            <el-input
              v-model="servicePackageNews.projectPrice"
              placeholder="请输入"
              style="height:40px;width:400px"
              
            />
          </el-form-item>
          <br />
          <el-form-item label="项目介绍" prop="title1">
            <el-input
              v-model="servicePackageNews.projectTitle"
              :rows="10"
              type="textarea"
              placeholder="请输入"
              style="width:800px;"
            />
          </el-form-item>
          <br>
          <el-form-item>
            <el-button type="primary" >保存</el-button>
            <el-button type="primary" @click="back_pre">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 这是大盒子的尾部 -->
  </div>
</template>

<script>
export default {
  name: "NewAddServiceItem",
  data() {
    return {
      servicePackageNews: {
        id: "",
        projectName: "",
        timeNum: "",
        projectType: "",
        projectPrice: "",
        projectTitle: "",
      },
      rules:{
        projectName:[
          {
            required:true,
            type: 'String',
            message: '项目名称为必填',
            trigger: 'blur',

          },
          {
            min:2,
            max:5,
            trigger: 'blur',
            message:'请输入正确的名称'
          }
        ],
        num:[
          {
            required:true,
            trigger: 'blur',
            type:Number,
            message:'使用次数为必填'
          }
        ],
        price1:[
          {
            required:true,
            trigger: 'blur',
            type: Number,
            message: '价格为必填'
          }
        ],
        title1:[
          {
            required:true,
            trigger: 'blur',
            type:String,
            message: '项目简介未必填'
          }
        ],
      }
    };
  },
  methods: {
    back_pre() {
      this.$router.push('/data-management/service-project-management')
    }
  },
};
</script>

<style lang="less" scoped>
// 顶部标题
.new-add-service-item {
  background: #fff;
  padding: 10px;
  .top {
    padding: 10px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 22px;
    margin-top: 10px;
    div {
      width: 5px;
      height: 25px;
      background: blue;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  .middle {
    .title {
      text-align: left;
      padding: 10px;
    }
    .my_container{
      padding: 10px;
      text-align: left;
    }
  }
}
</style>
